<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :closable="false"
    @close="close"
    destroyOnClose
    :visible="visible">
    <job-config-form ref="realForm" v-if="currSelectedJobType == 0 || currSelectedJobType== 2" @ok="submitCallback" :disabled="disableSubmit" normal></job-config-form>
    <div class="drawer-footer">
      <a-button @click="handleCancel" style="margin-bottom: 0;">关闭</a-button>
      <a-button v-if="!disableSubmit"  @click="handleSubmit" type="primary" style="margin-bottom: 0;">提交</a-button>
<!--      <a-button v-if="!disableSubmit"  @click="handleSubmit" type="primary" style="margin-bottom: 0;">执行</a-button>-->
    </div>
  </a-drawer>
</template>

<script>

  import JobConfigForm from './JobConfigForm'

  export default {
    name: 'JobConfigModal',
    components: {
      JobConfigForm
    },
    props: {
      // 声明接收名为currSelected的prop
      currSelectedJobType: {
        type: String, // 根据实际数据类型定义
        required: true, // 如果这个prop是必需的，可以设置为true
      },
    },
    data () {
      return {
        title:"操作",
        width:1200,
        visible: false,
        disableSubmit: false,
        show:false
      }
    },
    watch:{
      currSelectedJobType:{
        immediate:true,
        handler() {
          this.title = this.title+this.getJobTypeDesc(this.currSelectedJobType)
        },
      }
    },
    methods: {
      getJobTypeDesc(jobType){
        switch (jobType) {
          case '0':
            return 'SQL流任务'
          case '1':
            return 'JAR任务'
          case '2':
            return 'SQL批任务'
          default: return ''
        }
      },
      add () {
        this.visible=true
        this.$nextTick(()=>{
          //如果编辑的是sql任务
          if(this.currSelectedJobType == "0" || this.currSelectedJobType == "2"){
            this.$refs.realForm.add(this.currSelectedJobType);
          }
        })
      },
      edit (record) {
        this.visible=true
         this.$nextTick(()=>{
          //如果编辑的是sql任务
          if(record.jobType == "0" || record.jobType == "2"){

            this.$refs.realForm.edit(record);
          }
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleSubmit () {
        this.$refs.realForm.submitForm();
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style lang="less" scoped>
/** Button按钮间距 */
  .ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }
  .drawer-footer{
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>